<template>
	<div class="side">
		<div class="flex flex-pack-justify flex-align-center">
			<span>组织部门</span>
			<a-space :size="0">
				<a-button type="link" @click="refreshTree()"><a-icon type="sync" /></a-button>
			</a-space>
		</div>
		<div class="flex">
			<a-input-search class="flex-1" v-model="searchValue" placeholder="筛选部门" @search="searchTree()" allow-clear />
			<a-button @click="cancelSearch" v-if="showlist" class="ant-btn-yellow" style="padding: 0 10px; margin-left: 5px;">取消</a-button>
		</div>
		<a-tree
			v-if="!showlist"
			style="margin-top: 10px;"
			:tree-data="schoolTree"
			:expanded-keys="expandedKeys"
			:load-data="getSchoolTree"
			:auto-expand-parent="autoExpandParent"
			:replaceFields="replaceFields"
			:selectedKeys.sync="treeKeys"
			:loadedKeys="loadedKeys"
			@select="selectTree"
			@expand="onExpand"
		>
			<template slot="title" slot-scope="{ deptName, deptType }">
				<img class="icon" src="../assets/img/other-icon.png" v-if="deptType == 'OTHER'" />
				<img class="icon" src="../assets/img/grade-icon.png" v-if="deptType == 'GRADE'" />
				<img class="icon" src="../assets/img/class-icon.png" v-if="deptType == 'CLASS'" />
				<img class="icon" src="../assets/img/school-icon.png" v-if="deptType == 'SCHOOL'" />
				<span v-if="deptName.indexOf(searchValue) > -1">
					{{ deptName.substr(0, deptName.indexOf(searchValue)) }}
					<span style="color: #f50">{{ searchValue }}</span>
					{{ deptName.substr(deptName.indexOf(searchValue) + searchValue.length) }}
				</span>
				<span v-else>{{ deptName }}</span>
			</template>
		</a-tree>

		<div class="dept" v-if="showlist" v-infinite-scroll="handleInfiniteOnLoad" :infinite-scroll-disabled="busy" :infinite-scroll-distance="10">
			<a-spin :spinning="loading" style="height: 100%;">
				<a-menu v-model="menuselectedKeys">
					<a-menu-item :key="item.deptId" @click="handerDept(item)" v-for="(item, index) in deptlist">
						<img class="icon" src="../assets/img/other-icon.png" v-if="item.deptType == 'OTHER'" />
						<img class="icon" src="../assets/img/grade-icon.png" v-if="item.deptType == 'GRADE'" />
						<img class="icon" src="../assets/img/class-icon.png" v-if="item.deptType == 'CLASS'" />
						<img class="icon" src="../assets/img/school-icon.png" v-if="item.deptType == 'SCHOOL'" />
						{{ item.deptName }}
					</a-menu-item>
				</a-menu>
			</a-spin>
		</div>
	</div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import { sysManageapi } from '@/api/index.js';
import infiniteScroll from 'vue-infinite-scroll';
export default {
	name: 'schoolTree',
	props: {},
	data() {
		return {
			treeKeys: [],
			autoExpandParent: false,
			expandedKeys: [],
			loadedKeys: [],
			searchValue: '',
			replaceFields: { children: 'children', title: 'deptName', key: 'deptId', value: 'deptId' },
			pageNumber: 1,
			pageSize: 20,
			deptlist: [],
			menuselectedKeys: [],
			loading: false,
			busy: false,
			showlist: false
		};
	},
	computed: {
		...mapState(['schoolTree'])
	},
	directives: { infiniteScroll },
	created() {
		if (this.schoolTree.length == 0) {
			this.getSchoolTree();
		}
	},
	methods: {
		...mapActions(['getSchoolTree']),
		/* 刷新树节点 */
		refreshTree() {
			this.showlist = false;
			this.loadedKeys = [];
			this.expandedKeys = [];
			this.treeKeys = [];
			this.$emit('selected', null);
			this.getSchoolTree();
		},
		/* 筛选部门树 */
		searchTree() {
			if (this.searchValue) {
				this.showlist = true;
				this.pageNumber = 1;
				this.getDeptlist();
			} else {
				this.showlist = false;
			}
		},
		/* 选中部门，刷新列表 */
		selectTree(selectedKeys, e) {
			let selectedDept = null;
			if (selectedKeys && selectedKeys.length > 0) {
				selectedDept = { ...e.node.dataRef };
			}
			this.$emit('selected', selectedDept);
		},
		onExpand(expandedKeys) {
			this.expandedKeys = expandedKeys;
			this.autoExpandParent = false;
		},
		getDeptlist() {
			this.loading = true;
			this.$postAction(sysManageapi.getSchoollist, {
				deptName: this.searchValue,
				pageNumber: this.pageNumber,
				pageSize: this.pageSize
			})
				.then(res => {
					if (res && res.code == 200) {
						let list = [];
						if (this.pageNumber == 1) {
							list = res.data;
						} else {
							list = this.deptlist.concat(res.data);
						}
						this.deptlist = [...list];
						this.busy = this.deptlist.length == res.total;
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		handerDept(dept) {
			if (this.menuselectedKeys.length > 0 && dept.deptId == this.menuselectedKeys[0]) {
				this.menuselectedKeys = [];
				this.$emit('selected', null);
			} else {
				this.$emit('selected', dept);
			}
		},
		handleInfiniteOnLoad() {
			if (!this.busy && !this.loading) {
				this.pageNum++;
				this.getDeptlist();
			}
		},
		cancelSearch() {
			this.showlist = false;
			this.menuselectedKeys = [];
			this.treeKeys = [];
			this.$emit('selected', null);
		}
	}
};
</script>

<style scoped="scoped" lang="less">
.side {
	width: 260px;
	padding: 20px;
	height: 100%;
	position: relative;
	.dept {
		position: absolute;
		top: 95px;
		bottom: 0;
		left: 20px;
		right: 20px;
		overflow: auto;
	}
}
.icon {
	height: 12px;
	width: 12px;
	vertical-align: -0.125em;
}
</style>
